<template>
  <!-- 不是mac -->
  <div class="window-title" v-if="!IsUseSysTitle">
    <div
      class="flex items-center h-full ml-auto"
      :class="isNotMac ? 'mr-40' : 'mr-10'"
    >
      <div
        style="padding: 2px 8px; -webkit-app-region: no-drag"
        v-if="!isLogin"
        @click="login"
        class="rounded-sm cursor-pointer hover:bg-slate-600"
      >
        登录
      </div>
      <div
        class="ml-auto flex items-center"
        v-else
        style="-webkit-app-region: no-drag"
      >
        <div class="mr-2">{{ userinfo?.email }}</div>
        <div class="px-2">|</div>
        <div
          style="padding: 2px 8px"
          class="rounded-sm cursor-pointer hover:bg-slate-600"
          @click="loginOutHandle"
        >
          退出
        </div>
      </div>
    </div>
  </div>
  <!-- 是mac -->
  <!-- <div v-else-if="!IsUseSysTitle && !isNotMac" class="window-title">444</div> -->
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { loginOut } from "@renderer/https/api/user.js";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
import { useStoreTemplate } from "@renderer/store/modules/template";
const storeTemplate = useStoreTemplate();

let { ipcRenderer, systemInfo } = window;

const IsUseSysTitle = ref(false);
const mix = ref(false);
const isNotMac = ref(false);
// const IsWeb = ref(Boolean(__ISWEB__));

if (!ipcRenderer) {
  ipcRenderer = {} as any;
  ipcRenderer.on =
    ipcRenderer.invoke =
    ipcRenderer.removeAllListeners =
      (...args: any): any => {
        console.log("not electron");
      };
} else {
  isNotMac.value = systemInfo.platform !== "darwin";
  ipcRenderer.invoke("IsUseSysTitle").then((res) => {
    IsUseSysTitle.value = res;
  });
}

const isLogin = computed(() => {
  return storeTemplate.$state.token ? true : false;
});
const userinfo = computed(() => {
  return storeTemplate.$state.userInfo;
});

const login = () => {
  router.push("/login");
};

const loginOutHandle = () => {
  loginOut()
    .then((res) => {
      storeTemplate.$state.token = null;
      storeTemplate.$state.userInfo = null;
      router.push("/login");
    })
    .catch((err) => {
      ElMessage.error(err.msg);
    });
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.window-title {
  width: 100%;
  height: 30px;
  background-color: #040d21;
  display: flex;
  align-items: center;
  -webkit-app-region: drag;
  font-size: 12px;
  position: fixed;
  top: 0;
  z-index: 99;

  // .controls-container {
  //   display: flex;
  //   flex-grow: 0;
  //   flex-shrink: 0;
  //   text-align: center;
  //   position: relative;
  //   z-index: 3000;
  //   -webkit-app-region: no-drag;
  //   height: 100%;
  //   width: 138px;
  //   margin-left: auto;

  //   .windows-icon-bg {
  //     display: inline-block;
  //     -webkit-app-region: no-drag;
  //     height: 100%;
  //     width: 33.34%;
  //     color: rgba(129, 129, 129, 0.6);

  //     .icon-size {
  //       width: 12px;
  //       height: 15px;
  //       vertical-align: -0.15em;
  //       fill: currentColor;
  //       overflow: hidden;
  //     }
  //   }

  //   .windows-icon-bg:hover {
  //     background-color: rgba(182, 182, 182, 0.2);
  //     color: #333;
  //   }

  //   .close-icon:hover {
  //     background-color: rgba(232, 17, 35, 0.9);
  //     color: #fff;
  //   }
  // }
}
</style>
